<template>
	<view>
		<view style="background-color: #18B566;padding-bottom: 10rpx;">
			<view style="display: flex;justify-content: center;align-items: center;color: white;height: 120rpx;">
				<h1>{{orgFunds}}</h1>
			</view>
			<view style="text-align: center;color: white;">社费余额(元)</view>
		</view>
		<!-- 时间选择器 -->
		<uni-forms style="width: 92%;margin-left: 4%;" :value="pageRequest">
			<uni-forms-item label="开始时间">
				<uni-datetime-picker v-model="pageRequest.startTime"></uni-datetime-picker>
			</uni-forms-item>
			<uni-forms-item label="结束时间">
				<uni-datetime-picker v-model="pageRequest.endTime" />
			</uni-forms-item>
			<button @click="search" type="primary">搜索</button>
		</uni-forms>
		<view
			style="background-color: #DCDFE6;height: 60rpx;display: flex;justify-content: center;align-items: center;">
			社费流水</view>
		<view style="margin-top: 20rpx;">
			<view style="margin: 4%;" v-for="(tran,index) in orgFundsTrans" :key="index">
				<view style="display: flex;justify-content: space-between;margin-bottom: 10rpx;">
					<view style="font-size:large;">{{tran.traReason}}</view>
					<view style="font-size:large;">{{tran.traChangeAmount/100}}</view>
				</view>
				<view style="display: flex;justify-content: space-between;">
					<view style="color: #808080;font-size: smaller;">{{tran.createAt}}</view>
					<view style="color: #808080;">余额：{{tran.traAmount/100}}</view>
				</view>
			</view>
		</view>
		<!-- 修改社费 -->
		<u-popup v-model="show" mode="center">
			<view>
				<u-field type="number" v-model="fundsRequest.funds" label="修改的经费" placeholder="加传正,减传负,单位:元">
				</u-field>
				<u-field type="textarea" v-model="fundsRequest.reason" label="修改原因" placeholder="请输入修改原因" />
				<u-button type="success" @click="updateFunds">修改</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orgId: null,
				orgFunds: null,
				pageRequest: {
					pageNo: 0,
					pageSize: 10,
					startTime: null,
					endTime: null
				},
				orgFundsTrans: [],
				show: false,
				fundsRequest: {
					funds: null,
					reason: null
				}
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			this.orgId = option.orgId;
		},
		onShow() {
			this.getFunds()
			this.pageRequest.pageNo = 0;
			this.orgFundsTrans = []
			this.getFundTrans()
		},
		// 右上角更多
		onNavigationBarButtonTap: function(e) {
			this.show = true;
		},
		methods: {
			// 修改经费
			updateFunds() {
				this.fundsRequest.funds *= 100;
				this.$http.request({
					url: '/organizations/web/organization/fund',
					method: 'POST',
					data: {
						orgId: this.orgId,
						funds: this.fundsRequest.funds,
						reason: this.fundsRequest.reason
					}
				}).then(res => {
					res = res.data;
					if (res.result) {
						this.show = false;
						uni.showModal({
							content: res.msg,
							showCancel: false,
							success: res => {
								this.pageRequest.pageNo = 0;
								this.orgFundsTrans = [];
								this.getFunds()
								this.getFundTrans()
								this.fundsRequest.funds = null;
								this.fundsRequest.reason = null;
							}
						});
					} else {
						uni.showModal({
							content: res.msg,
							showCancel: false
						});
					}
				})
			},
			// 搜索
			search() {
				this.pageRequest.pageNo = 0;
				this.orgFundsTrans = [];
				this.getFundTrans()
			},
			// 获取社团经费
			getFunds() {
				this.$http.request({
					url: `/organizations/web/organization/fund/${this.orgId}`
				}).then(res => {
					res = res.data;
					if (res.result) {
						this.orgFunds = res.data / 100;
					} else {
						uni.showModal({
							content: res.msg,
							showCancel: false
						});
					}
				})
			},
			// 获取社团经费流水
			getFundTrans() {
				this.pageRequest.pageNo++;
				this.$http.request({
					url: `/organizations/web/organization/fundsPage`,
					method: 'POST',
					data: {
						pageNo: this.pageRequest.pageNo,
						pageSize: this.pageRequest.pageSize,
						orgId: this.orgId,
						startTime: this.pageRequest.startTime,
						endTime: this.pageRequest.endTime
					}
				}).then(res => {
					res = res.data;
					if (res.result) {
						this.orgFundsTrans = [
							...this.orgFundsTrans,
							...res.data
						]
					} else {
						uni.showModal({
							content: res.msg,
							showCancel: false
						});
					}
				})
			},
			// 页面下拉到底部
			onReachBottom() {
				// 当前页+1
				this.getFundTrans()
			}
		}
	}
</script>

<style>
</style>
